<template>
  <my-card class="card">
    <div class="home">
      <p class="system-welcome">
        <span
          >尊敬的{{
            userInforStore?.user?.account
          }}您好！欢迎来到{{ projectName }}。</span
        >
      </p>
      <p class="system-warning">请注意数据安全。</p>
    </div>
    <!-- 跑马灯 -->
    <Vue3Marquee style="max-width: 500px;">这是跑马灯的内容这是跑马灯的内容这是跑马灯的内容这是跑马灯的内容这是跑马灯的内容这是跑马灯的内容</Vue3Marquee>
  </my-card>
</template>

<script setup lang="ts">
import MyCard from '@/components/card/MyCard.vue'
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { onMounted } from 'vue'
import { useUserInfoStore } from '@/store/modules/userInfo'

const userInforStore = useUserInfoStore()
const projectName = import.meta.env.VITE_APP_TITLE

onMounted(() => {})

</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: calc(100% - 2px);
  // background-color: #ccc;
  // border-radius: 8px;

  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // background-position: center center;
  // background-image: url("@/assets/images/home.png");

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .home {
    width: 666px;
    height: 198px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 6px 24px 0px #041c6e;
    line-height: 22px;
    text-align: center;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    .system-welcome {
      padding-top: 70px;
      font-size: 18px;
      font-weight: 400;
      color: #001529;
      animation: system_welcome 0.4s 0.3s ease-in both;
    }
    .system-warning {
      font-size: 16px;
      font-weight: 700;
      color: #ff0000;
      animation: system_warning 0.6s 0.8s ease-in both;
    }
  }
}
@keyframes system_welcome {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes system_warning {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
